<template>
  <div class="detailswiper">
    <swiper ref="mySwiper" :options="swiperOptions" >
    <!-- <swiper-slide > -->
    <swiper-slide v-for="(item,key) in DeswiperList" :key="key">
      <!-- <img src="../../../../static/images/recommend4.png" alt="" class="swiper-img" @click="haddleBannerClick"> -->
      <img class="swiper-img" :src="item.imgUrl" @click="haddleBannerClick">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  <common-gallery :imgs="galleryImgs" v-show="showGallery" @close="haddleBannerClose"></common-gallery>
  </div>
</template>

<script>
import CommonGallery from '@/common/gallery/Gallery'
export default {
  name: 'DetailSwiper',
  props:{
      DeswiperList:Array,
      galleryImgs:Array,
  },
  data () {
    return {
      swiperOptions: {
          pagination:'.swiper-pagination',
          loop:false,
          // autoplay:3000,
        },
      imgs:[
            'static/images/recommend4.png',
            'static/images/recommend4.png',
            'static/images/recommend4.png',
          ],
      showGallery:false
    }
  },
  components:{
    CommonGallery,
  },
  methods:{
    haddleBannerClick(){
      this.showGallery = true
    },
    haddleBannerClose(){
      this.showGallery = false
    }
  }
}
</script>


<style lang="stylus" scoped>
// 穿透
.detailswiper >>> .swiper-pagination-bullet-active
    background #000
.detailswiper
    width 100%
    background-color red 
    overflow hidden
    height 0
    // 其中50%为轮播图片的宽高比
    padding-bottom 100%
    // 用于图片没有加载出来时的背景显示
    background #fff 
    .swiper-img
        width 100%
        height 6.6rem
    .swiper-pagination
        margin-bottom -2%
</style>
